<extend name="Base/common"/>
<block name="Content">
    <div class="am-cf am-padding-top">
        <div class="am-fl am-cf">
        	<i class="am-icon-file"></i>
            <strong class="am-text-primary am-text-lg">编辑角色权限---->{$role_name}</strong>
        </div>
        <div class="am-margin-right am-text-right ">
        
            <button type="submit" class="am-btn am-btn-success am-btn-xs ajax-post" url="{:U('Role/authority')}" target-form="am-form">
               	 提交保存
            </button>
            <button type="button" class="am-btn am-btn-secondary am-btn-xs" onclick="javascript:history.back(-1);return false;">
           		 返回列表
            </button>
        </div>
        <hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
    </div>
    <div class="am-cf">
    	<form class="am-form" method="post" action="{:U('Role/authority')}">
    	<input type="hidden" name="role_id" value="{$role_id}"/>
        <ul class="am-avg-sm-4">
        	<notempty name="__AUTH__">
            <foreach name="__AUTH__" item="vo">
                <li class="am-padding-lg">
                    <div class="am-g am-btn-default">
                        <div class="am-u-sm-9 am-fl">
                            <label class="am-checkbox am-success">
                                <input class="first-menu" type="checkbox" value="{$vo.menu_id}" name="menuid[]"
                                	<if condition="$vo['class'] eq 'checked'"> checked="checked"  data-am-ucheck checked<else/> data-am-ucheck</if>/>
                                {$vo.menu_name}
                            </label>
                        </div>
                        <div class="am-u-sm-3">
                            <label class="am-checkbox am-success am-fr">
                                <a data-am-collapse="{target:'#{$vo.menu_id}'}"><span class="am-icon-angle-double-down"></span></a>
                            </label>
                        </div>
                    </div>
                    <nav>
                        <ul id="{$vo.menu_id}" class="am-nav am-collapse">
                        	<notempty name="vo['_child']">
                            <foreach name="vo['_child']" item="sub_name">
                                <li>
                                    <label class="am-checkbox am-success">
                                        <input class="second-menu" type="checkbox" value="{$sub_name.menu_id}" name="menuid[]"
                                        	<if condition="$sub_name['class'] eq 'checked'"> checked="checked" data-am-ucheck checked<else/> data-am-ucheck</if>/>
                                        {$sub_name.menu_name}
                                    </label>
                                    <ul>
                                    	<notempty name="sub_name['_child']">
                                        <foreach name="sub_name['_child']" item="menuname">
                                            <li>
                                                <label class="am-checkbox am-success">
                                                    <input class="third-menu" type="checkbox" value="{$menuname.menu_id}" name="menuid[]"
													<if condition="$menuname['class'] eq 'checked'"> checked="checked" data-am-ucheck checked<else/> data-am-ucheck</if>/>
                                                    {$menuname.menu_name}
                                                </label>
                                            </li>
                                        </foreach>
                                        </notempty>
                                    </ul>
                                </li>
                            </foreach>
                            </notempty>
                        </ul>
                    </nav>
                </li>
            </foreach>
            </notempty>
        </ul>
        </form>
    </div>
</block>
<block name="script">
    <script type="text/javascript">
	    $(':checkbox').click(function(event){
			var $firstMenu = $(this).parents(".am-padding-lg").find(".first-menu");
			
			if(!$(this).prop("checked")){
				
				if($(this).hasClass('third-menu')){
					var thirdLeng = $(this).closest("ul").find(":checkbox").filter(function(){
						return $(this).prop("checked")
					}).length;
					//若当前一级菜单下无选中菜单，则修改当前一级菜单为未选中状态
					if(thirdLeng == 0){
						$(this).closest("ul").prev("label").find(".second-menu").prop("checked", false);
					}
				}else{
					$(this).closest('li').find(":checkbox").prop("checked", false);
				}
				
				//判断当前一级菜单下有多少菜单是选中状态
				var secondLength = $(this).parents(".am-padding-lg").find(":checkbox").not(".first-menu").filter(function(){
						return $(this).prop("checked")
				}).length;
		
				//若当前一级菜单下无选中菜单，则修改当前一级菜单为未选中状态
				if(secondLength == 0){
					$firstMenu.prop("checked", false);
				}
			}else{
				
				if($(this).hasClass('third-menu')){
					$(this).closest("ul").prev("label").find(".second-menu").prop("checked", true);
				}else{
					$(this).closest('li').find(":checkbox").prop("checked", true);
				}
				$firstMenu.prop("checked", true);
			}
	    });
	    
	    lazy = false;
	    $('#opt-select').change(function(){
	    	if(!lazy){
	    		lazy = true;
	    		return;
	    	}
    		var selectVal = $('#opt-select').val();
    		switch(selectVal){
				case '1':
					$(".am-padding-lg :checkbox").prop("checked",false);
					break;
				case '2':
					$(".am-padding-lg :checkbox").prop("checked",true);
					break;
				case '3':
					$(".am-padding-lg").find(".am-nav.am-collapse").removeClass().addClass("am-nav am-collapse am-in");
					break;
				case '4':
					$(".am-padding-lg").find(".am-nav.am-collapse").removeClass().addClass("am-nav am-collapse");
					break;
			}
	    	
	    });
		
    </script>
</block>
